<script setup lang="ts">
import type { PropType } from 'vue'
import type { FullModelInfo } from '@/services/model/type'
import { AddSquareMultiple20Regular, DismissSquareMultiple20Regular } from '@vicons/fluent'
import { Icon } from '@vicons/utils'
import { formatBytes } from '@/utils/format'

// 定义事件
const emits = defineEmits(['action'])

// 外部参数
const props = defineProps({
  // 类型
  type: {
    type: String as PropType<'add' | 'del'>,
    required: true,
  },
  // 模型列表
  models: {
    type: Array as PropType<FullModelInfo[]>,
    required: true,
  },
  // 空内容提示
  emptyText: {
    type: String,
    required: true,
  },
})

// 检测模型标签
const checkModelTag = (type: string, modelInfo: FullModelInfo) => {
  switch (type) {
    case 'embedding':
      // 嵌入
      return modelInfo.type === 'embedding'
    case 'toolUse':
      // 工具
      return !!modelInfo.toolUse
    case 'vision':
      // 视觉
      return !!modelInfo.vision
  }
}

// 操作提示文本
const getActionTips = (model: FullModelInfo) => {
  if (props.type === 'add') {
    return '添加“' + model.name + '”模型'
  }
  return '移除“' + model.name + '”模型'
}

// 操作
const onAction = (model: FullModelInfo) => {
  emits('action', model)
}
</script>

<template>
  <div>
    <div v-if="props.models.length" class="model-list">
      <div v-for="(item, index) of props.models" :key="index" class="line">
        <div class="info">
          <div class="name">
            {{ item.name }}
          </div>
          <a-tooltip v-if="checkModelTag('embedding', item)" title="嵌入模型 (Embedding)">
            <n-tag type="warning" size="small"> 嵌入 </n-tag>
          </a-tooltip>
          <a-tooltip v-if="checkModelTag('vision', item)" title="可处理图像 (Vision)">
            <n-tag type="success" size="small"> 视觉 </n-tag>
          </a-tooltip>
          <a-tooltip v-if="checkModelTag('toolUse', item)" title="可使用工具 (Tools)">
            <n-tag type="primary" size="small"> 工具 </n-tag>
          </a-tooltip>
          <div class="size" v-if="item.size">{{ formatBytes(item.size) }}</div>
        </div>
        <div class="action">
          <a-tooltip :title="getActionTips(item)" placement="right">
            <template v-if="props.type === 'del'">
              <n-button type="error" size="small" text @click="onAction(item)">
                <template #icon>
                  <Icon size="28"><DismissSquareMultiple20Regular /></Icon>
                </template>
              </n-button>
            </template>
            <template v-else>
              <n-button type="success" size="small" text @click="onAction(item)">
                <template #icon>
                  <Icon size="28"><AddSquareMultiple20Regular /></Icon>
                </template>
              </n-button>
            </template>
          </a-tooltip>
        </div>
      </div>
    </div>
    <n-alert v-else type="warning" :show-icon="false">
      {{ props.emptyText }}
    </n-alert>
  </div>
</template>

<style lang="scss" scoped>
.model-list {
  border-radius: 4px;
  padding: 0 12px;
  border: 1px solid var(--vas-border-color);
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;

    .info {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-right: 10px;

      .name {
        font-weight: 500;
        font-size: 15px;
      }

      .size {
        color: #b0b0b0;
        font-size: 12px;
      }
    }

    .action {
      display: flex;
      align-items: center;
    }
    + .line {
      border-top: 1px solid var(--vas-border-color);
    }
  }
}
</style>
